<template>
    <div class="heads"
         :style="{
        'background':  ts  ? $store.state.nowTime==='moon' ? '#232121' : '#fff' : 'rgba(10,10,10,0.25)',
        'color': $store.state.nowTime==='moon' ? '#fff' : '#8f8c8c',
        'box-shadow':
           ts  ? $store.state.nowTime==='moon' ?
            '0 1px 1px 0 #fff, 0 2px 10px 0 #fff' :
            '0 1px 1px 0 rgba(0, 0, 0, 0.2), 0 2px 10px 0 rgba(0, 0, 0, 0.19)'
            :''}">
        <ul class="head_selects">
            <div class="sidebar" @click="signIn"
                 :style="{'color':ts  ? $store.state.nowTime==='moon' ?  '#fff' : '#232121' : ''}">
                <img src="/img/common/qiandao.png" alt="" id="img" title="签到">
                签到
            </div>
            <li :class=" choose === 1  ?  'choose' :'' " @click="choose_(1)">
                <img src="/img/common/guangchang.png" alt="" class="CarouselMap_ico" >
                <router-link to="/home"
                             :style="{'color':ts  ? $store.state.nowTime==='moon' ?  '#fff' : '#232121' : ''}">首页
                </router-link>
            </li>
            <li class="computer" id="pull_down"
                :class="{'select':select , 'choose' :choose === 2 }"
                @mousemove="head_selects_hover" @mouseout="head_selects_out">
                <img src="/img/common/remen.png" alt="" class="CarouselMap_ico" title="广场">
                <p :style="{'color':ts  ? $store.state.nowTime==='moon' ?  '#fff' : '#232121' : ''}">广场&nbsp;</p>
                <ContentDisplay_ul :style="{'transform':rotate}">
                    <ContentDisplay_li>
                        <router-link to="/greatpictures" @click="choose_(2)">精美图片</router-link>
                    </ContentDisplay_li>
                    <ContentDisplay_li>
                        <router-link to="/community" @click="choose_(2)">社区活动</router-link>
                    </ContentDisplay_li>
                </ContentDisplay_ul>
            </li>
            <li  class="computer" :class=" choose === 3  ?  'choose' :'' " @click="choose_(3)">
                <img src="/img/common/bijiben.png" alt="" class="CarouselMap_ico" title="创作中心">
                <router-link to="/articleEditing"
                             :style="{'color':ts  ? $store.state.nowTime==='moon' ?  '#fff' : '#232121' : ''}">创作中心
                </router-link>
            </li>
            <li class="computer" :class=" choose === 4  ?  'choose' :'' " @click="choose_(4)">
                <img src="/img/common/liuyanban.png" alt="" class="CarouselMap_ico" title="留言板">
                <router-link to="/messageBoards"
                             :style="{'color':ts  ? $store.state.nowTime==='moon' ?  '#fff' : '#232121' : ''}">留言板
                </router-link>
            </li>
            <li id="pull_down"
                :class="{'select':select , 'choose' :choose === 5 }"
                @mousemove="more_selects_hover" @mouseout="more_selects_out" >
                <img src="/img/common/gengduo.png" alt="" class="CarouselMap_ico" title="更多">
                <p :style="{'color': ts  ? $store.state.nowTime==='moon' ?  '#fff' : '#232121' : ''}">更多&nbsp;</p>
                <ContentDisplay_ul :style="{'transform':rotate_more}">
                    <ContentDisplay_li class="phone_" >
                        <router-link to="/greatpictures" @click="choose_(5)">精美图片</router-link>
                    </ContentDisplay_li>
                    <ContentDisplay_li class="phone_">
                        <router-link to="/articleEditing" @click="choose_(5)">创作中心</router-link>
                    </ContentDisplay_li>
                    <ContentDisplay_li class="phone_">
                        <router-link to="/community" @click="choose_(5)">社区活动</router-link>
                    </ContentDisplay_li>
                    <ContentDisplay_li class="phone_">
                        <router-link to="/messageBoards" @click="choose_(5)">留言板</router-link>
                    </ContentDisplay_li>
                    <ContentDisplay_li>
                        <router-link to="/changelog" @click="choose_(5)">更新公告</router-link>
                    </ContentDisplay_li>
                    <ContentDisplay_li>
                        <router-link to="/loveSpace" @click="choose_(5)">恋爱空间</router-link>
                    </ContentDisplay_li>

<!--                    <li class="phone_">-->
<!--                        <router-link to="" @click="choose_(5)"></router-link>-->
<!--                    </li>-->
                </ContentDisplay_ul>
            </li>

        </ul>


        <ul class="head_capabilities" @click="queries" @mouseover="s_">
            <li style="position: relative">
                <input type="text" class="search search_a" placeholder="请输入~" v-model="searchValue"
                       @focusout="queries_n()" @focus="queries">
                <img src="/img/common/sousuo.png" alt="" @click="search_b">
                <SearchBar :fuzzyQueries="fuzzyQueries" v-show="display" @empty="empty" @mouseover="selected"
                           @mouseout="selected_">
                    <div style="color: #868080;; font-size: 1rem;"  v-show="fuzzyQueries.length<1">
                        未查询到相关内容
                    </div>
                </SearchBar>
            </li>
        </ul>

    </div>

</template>

<script>
import ContentDisplay_ul from "@/components/PublicComponents/ContentDisplay-ul.vue";
import ContentDisplay_li from "@/components/PublicComponents/ContentDisplay-li.vue";
import SearchBar from "@/components/home/SearchBar.vue";
import api from "@/api";

export default {
    name: "HeadNavigationBar",
    components: {
        ContentDisplay_ul,
        ContentDisplay_li,
        SearchBar,
    },
    data() {
        return {
            dataList: ["/img/common/微信图片_20221010103901.jpg"],
            rotate: "",
            rotate_more: "",
            color: "",
            background: "",
            fuzzyQueries: [],
            searchValue: "",
            times: "",
            display: false,
            ts: false,
            skate: false,
            search: false,
            s_: "",
            select: false,
            choose:1,
        }
    },
    mounted() {
        this.s_ = this.queries_n;
        let ts = window.localStorage.getItem("nowTime")
        if (ts !== "") {
            this.$store.commit("nowTimeStatue", ts);
        }
        window.addEventListener('scroll', this.handleScrollx, true);
    },
    watch: {
        searchValue() {
            clearTimeout(this.times)
            this.times = setTimeout(() => {
            }, 900)
            api.fuzzyQueries(this.searchValue).then((res) => {
                this.fuzzyQueries = res.data.data;
            })
        }
    },
    methods: {
        choose_(index){
            this.choose=index;
            if(index===3 && window.localStorage.getItem("user") == null){
                this.choose=1;
            }

        },
        signIn() {
            this.$store.commit("signIn_", true);
        },
        selected() {
            this.s_ = ""
        },
        selected_() {
            this.s_ = this.queries_n;
        },
        search_b() {
            this.search = true;
            setTimeout(() => {
                document.querySelector(".search").focus();

            }, 200)
        },

        empty() {
            this.searchValue = "";
        },
        handleScrollx() {
            if (window.pageYOffset >= 100) {
                this.color = "#eceef1";
                this.background = "#ffffff";
                this.select = true;
                this.ts = true;
            } else if (window.pageYOffset < 100) {
                this.color = "";
                this.background = "";
                this.ts = false;
                this.select = false;
            }
        },
        queries_n() {
            setTimeout(() => {
                this.display = false;
            }, 800)
        },
        queries() {
            setTimeout(() => {
                this.display = true;
            }, 600)

        },
        head_selects_hover() {
            this.rotate = "rotateX(0deg)";
        },
        head_selects_out() {
            this.rotate = "";
        },
        more_selects_hover() {
            this.rotate_more = "rotateX(0deg)";
        },
        more_selects_out() {
            this.rotate_more = "";
        },

    }
}
</script>

<style scoped>

.heads .head_selects li a, p {
    color: white;
    font-size: 14px;

}

@keyframes li_b {
    0% {
        width: 0;
        transform: scale(0);
    }
    100% {
        width: 100%;
        transform: scale(1);
    }
}

@keyframes li_d {
    0% {
        width: 100%;
        transform: scale(1);
    }
    100% {
        width: 0;
        transform: scale(0);
    }
}

.heads {
    display: flex;
    align-items: center;
    position: fixed;
    transform: translateY(-100%);
    height: 6.2vh;
    width: 100%;
    min-width: 60rem !important;
    max-height: 1200px;
    animation: head .5s linear forwards;

}

@keyframes head {
    0% {
        transform: translateY(-100%);
    }
    100% {
        transform: translateY(0);
    }
}

.head_selects {
    display: flex;
    justify-content: center;
    align-items: center;
    list-style: none;
    margin: auto;
}

.head_selects li {
    display: flex;
    justify-content: center;
    align-items: center;
    line-height: 6vh;
    margin: 0 12px;
    min-width: 55px;
    transition: all .2s;
    border-radius: 5px;
    box-sizing: border-box;
}

.head_selects li:hover {
    cursor: pointer;
    opacity: .9;
    text-shadow: 0 2px 2px 2px #171616;

}

.heads img {
    width: 1.1rem;
}

.heads .head_selects #pull_down::after {
    content: "";
    display: inline-block;
    width: 8px;
    height: 8px;
    border-left: 2px solid #fdf9f9;
    border-bottom: 2px solid #fcfafa;
    border-top: 0;
    border-right: 0;
    transform-origin: center;
    transform: rotate(-45deg);
    transition: all 0.3s;
}

.select::after {
    border-left: 2px solid #8f8c8c !important;
    border-bottom: 2px solid #8f8c8c !important;
}
#pull_down{
   padding:0 12px !important;
}
#pull_down li a {
    color: #8f8c8c !important;
}

#pull_down li:hover a{
    color: #1193e1 !important;
}

.heads .head_selects #pull_down:hover::after {
    transform: rotate(-225deg);
    margin-top: 5px;
}

.head_capabilities {
    width: 15vw;
    min-width: 150px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-right: auto;
    list-style: none;
    color: #8f8c8c;
}

.head_capabilities li {
    padding: 0 10px;
    display: flex;
    justify-content: center;
    align-items: center;
}


.search {
    outline: none;
    width: 100%;
    height: 3.5vh;
    margin-right: 5px;
    border-radius: 5px;
    border: 0;
    background: rgba(221, 224, 229, 0.6);
    color: #4281d5;
    text-indent: 0.3rem;
    transition: all .3s;
}

.search_a {
    animation: search 0.5s ease-in-out 0s 1 forwards;
}

@keyframes search {
    0% {
        transform: scale(0);
    }
    100% {
        transform: scale(1);
    }
}

.search::placeholder {
    font-size: 0.8rem;
}

.sidebar {
    display: flex;
    justify-content: left;
    align-items: center;
    font-size: 14px;
    color: white;
}

.sidebar img {
    width: 27px;
    height: 27px;
    margin-right: 3px;
}

.sidebar:hover {
    text-decoration: underline;
    cursor: pointer;
}

.phone_ {
    display: none !important;
}
.phone_:hover{
   background: rgba(143, 140, 140, 0.3);
}
.computer {
    display: flex !important;
}
.choose{
    border-bottom: 3px solid #6da6e1;
}
@media (min-width: 0px) and (max-width: 900px) {
    .head_selects {
        margin: 0;
    }
}

@media (min-width: 0px) and (max-width: 600px) {
    .head_selects {
        margin: 0;
    }

    .phone_ {
        display: flex !important;
    }

    .computer {
        display: none !important;
    }
}
</style>